<template>
	<div class="main show_support">
		<div class="header-wrapper">
			<div class="logo-wrapper">
				<img src="https://www.jsu.edu.cn/img/logo.png" style="height: 2.5rem;"/>
			</div>
			<div class="exam-name ellipsis">考试示例</div>
			<div class="user ellipsis">
				<i class="icon icon-a_nav_my"></i>
				hh
			</div>
			<a type="button" class="btn btn-default back-icon logout"></a>
		</div>
		<div>
			<img class="exam-picture-right" src="https://s5.kaoshixing.com/static/exam/images/competition/p_img_decorate1.png?v=d8f995b177" />
			<div class="content">
				<div class="exam-result">
					<div class="exam-result-top clearfix">
						<div class="exam-user-info exam-common">
							<p class="exam-user-header">
								<img src="https://s1.kaoshixing.com/static/exam/images/competition/p_img_default_head.png?v=9d4db3ef54" />
							</p>
							<p class="exam-user-name">{{recordList.userName}}</p>
						</div>
					</div>
					<div class="exam-result-score">
						<span class="star-big">
							<!-- <img src="https://s4.kaoshixing.com/static/exam/images/competition/p_img_star1.png?v=70cc9bee9e" /> -->
						</span>
						<span class="score">
							{{recordList.userScore}}
						</span>
						<span>分</span>
						<span class="star-small">
							<!-- <img src="https://s1.kaoshixing.com/static/exam/images/competition/p_img_star2.png?v=a70efe48ea" /> -->
						</span>
					</div>
					<p class="exam-result-remark">
						<span>感谢作答</span>
					</p>
					<div class="exam-result-analyze">
						<div class="exam-result-analyze-common">
							<p class="exam-result-percentage">{{recordList.correctNum}}</p>
							<p class="exam-result-percentage-icon">
								<!-- <img src="https://s3.kaoshixing.com/static/exam/images/competition/p_icon_accuracy_rate.svg?v=51faea52a4" /> -->
								<span>正确数</span>
							</p>
						</div>
						<div class="exam-result-analyze-common">
							<p class="exam-result-percentage" style="color: #ffaa00;">{{recordList.testPaperQuestionNum}}</p>
							<p class="exam-result-percentage-icon">
								<!-- <img src="https://s3.kaoshixing.com/static/exam/images/competition/p_icon_rank.svg?v=e32a9447e5" /> -->
								<span>总题数</span>
							</p>
						</div>
					</div>
				</div>
				<div class="exam-result-right">
					<div class="exam-handle-box">
						<div class="exam-look-analye" @click="$router.push({'name':'ExamStatistics',params:{'AnswerRecord':recordList}})">
							试卷统计
						</div>
						<div class="exam-look-analye" @click="$router.push('/AnswerRecord')">
							查看试卷
						</div>
						<div class="exam-again-test" @click="ChangeItem()" >
							再考一次
						</div>
					</div>

				</div>
			</div>
			<img class="exam-picture-left" src="https://s5.kaoshixing.com/static/exam/images/competition/p_img_decorate1.png?v=d8f995b177" />
		</div>
	</div>
</template>

<script>
import {TestManager} from "../../request/test.js"
 export default{
	 data()
	 {
		 return{
			Id:localStorage.getItem("test_record"),
			recordList:{},
		 }
	 },
	 methods:{
		 getTestRecordById()
		 {
			var parmas={
				id:this.Id
			}
			TestManager.getTestRecordById(this.qs.stringify(parmas)).then(e=>{
				console.log(e);
				this.recordList=e.data.data;
			})
		 },
		 ChangeItem(){
			 window.localStorage.setItem("testPaperId",this.recordList.testPaperId);
			 this.$router.push("/specialtest");
		 }
	 },
	 created() {
	 	this.getTestRecordById();
	 }
 }
	
</script>

<style scoped="scoped">
	.main {
		position: relative;
		padding-top: 100px;
		padding-left: 0;
		padding-right: 0;
		background: -webkit-linear-gradient(left, #03d3bd, #00DBCF);
	}

	.main {
		height: 90vh;
		min-height: 100%;
	}

	.header-wrapper {
		height: 70px;
		width: 100%;
		line-height: 70px;
		padding-left: 220px;
		padding-right: 400px;
		background: #FFFFFF;
		box-shadow: 0 2px 4px 0 rgb(153 153 153 / 10%);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1040;
	}

	.header-wrapper .logo-wrapper {
		height: 100%;
		width: 211px;
		position: absolute;
		left: 0;
		top: 0;
		text-align: right;
	}

	img,
	audio,
	video,
	iframe {
		max-width: 100%;
	}

	img {
		vertical-align: middle;
	}

	.header-wrapper .exam-name {
		font-size: 18px;
		color: #27274A;
		padding-left: 20px;
	}

	.ellipsis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.header-wrapper .user {
		position: absolute;
		right: 210px;
		top: 0;
		max-width: 160px;
	}

	.header-wrapper .user .icon {
		color: #1A8CFE;
		font-size: 16px;
		margin-right: 7px;
		line-height: 70px;
	}

	.icon[class*="icon-a_"],
	.icon[class*="icon-p_"],
	.icon[class*="icon-m_"] {
		position: relative;
		top: 1px;
	}

	.btn {
		display: inline-block;
		margin-bottom: 0;
		font-weight: normal;
		text-align: center;
		vertical-align: middle;
		-ms-touch-action: manipulation;
		touch-action: manipulation;
		cursor: pointer;
		background-image: none;
		border: 1px solid transparent;
		white-space: nowrap;
		padding: 6px 12px;
		font-size: 14px;
		line-height: 1.42857143;
		border-radius: 4px;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	.exam-picture-right {
		width: 180px;
		position: absolute;
		top: 90px;
		right: 0;
	}

	.content {
		width: 740px;
		padding: 0;
		margin: auto;
		overflow: hidden;
		position: relative;
	}

	.content .exam-result {
		padding-bottom: 20px;
		min-height: 265px;
	}

	.content .exam-result {
		width: 600px;
		float: left;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		padding: 0 30px;
		background: #FFFFFF;
		border-radius: 4 px;
		margin: 60px 0 0;
	}

	.content .exam-result .exam-result-top {
		position: relative;
		height: 102px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.content .exam-result .exam-common {
		width: 180px;
		position: absolute;
	}

	.content .exam-result .exam-user-info .exam-user-header img {
		border-radius: 50%;
		border: 2px solid #fff;
		width: 80px;
		height: 80px;
	}

	.content .exam-result .exam-user-info {
		max-width: 33.33%;
	}

	.content .exam-result .exam-common {
		width: 180px;
		position: absolute;
	}

	.content .exam-result .exam-user-info .exam-user-header {
		margin: -42px auto 0;
		text-align: center;
	}

	.content .exam-result .exam-user-info .exam-user-name {
		font-size: 26px;
		font-weight: 600;
		text-align: center;
		margin: 12px auto 0;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.content .exam-result .exam-common {
		width: 180px;
		position: absolute;
	}

	.exam-picture-left {
		width: 180px;
		position: absolute;
		bottom: 30px;
		left: 0;
	}

	.content .exam-result .exam-result-score {
		text-align: center;
		color: #03d3bd;
		font-size: 20px;
	}

	.content .exam-result .exam-result-score span {
		display: inline-block;
	}

	.content .exam-result .exam-result-score .star-small {
		vertical-align: top;
	}

	.content .exam-result .exam-result-score .score {
		font-size: 44px;
		font-weight: 500;
	}

	.content .exam-result .exam-result-remark {
		font-size: 14px;
		color: #C1C1CB;
		text-align: center;
	}

	.content .exam-result .exam-result-analyze {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	.content .exam-result .exam-result-analyze .exam-result-analyze-common {
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
		text-align: center;
	}

	.content .exam-result .exam-result-analyze .exam-result-percentage {
		font-size: 18px;
		color: #1A8CFE;
	}

	.content .exam-result .exam-result-analyze .exam-result-percentage-icon {
		color: #27274A;
	}

	.content .exam-result .exam-result-analyze .exam-result-percentage-icon img {
		vertical-align: text-bottom;
		width: 15px;
		margin-right: 4px;
	}

	.content .exam-result .exam-result-analyze .exam-result-analyze-common {
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
		text-align: center;
	}

	.content .exam-result .exam-result-analyze .exam-result-percentage {
		font-size: 18px;
		color: #03d3bd;
	}

	.content .exam-result .exam-result-analyze .exam-result-percentage-icon {
		color: #27274A;
	}

	.content .exam-result .exam-result-analyze .exam-result-percentage-icon img {
		vertical-align: text-bottom;
		width: 15px;
		margin-right: 4px;
	}

	.exam-result-right {
		height: 100%;
		margin: 60px 0 0 20px;
		display: inline-block;
		vertical-align: middle;
	}

	.exam-handle-box {
		/* margin-top: 11.75rem */
	}

	.exam-look-analye,
	.exam-again-test {
		margin-bottom: 10px;
		padding: 0.5125rem;
		background-color: white;
		border-radius: 0.2rem;
		text-align: center;
		cursor: pointer;
	}
</style>
